<template>
    <div class="comment-container">
        <div class="comment">
            <img class="comment-avatar" src="../../images/user.png" width="36" height="36" alt="">
            <textarea cols="30" rows="10" v-model="content" maxlength="120" 
            placeholder="输入您的评论"></textarea>
        </div>
        <mt-button type="primary" class="sumbit" size="small" @click="commitComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="item in message" :key="item.add_time">
                <img class="user-avatar" src="../../images/user.png" width="36" height="36" alt="">
                <div class="user-info">
                    <p class="name">{{item.user_name}}</p>
                    <div class="content">{{ item.content === 'undefined' ? '此用户很懒，什么也没说' : item.content }}</div>
                </div>
            </div>
            <mt-button type="danger" class="load" size="large" @click="getmore">加载更多</mt-button>
        </div>
    </div>
</template>

<script>
import { Toast} from 'mint-ui'
export default {
    data(){
        return {
            content: null,
            pageIndex: 1,
            message: []
        }
    },
    created(){
        this.getCommentInfo()
    },
    methods: {
        getCommentInfo(){  // 获取评论信息
            this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageIndex).then(result => {
                if(result.body.status === 0){
                    this.message = this.message.concat(result.body.message)
                }else{
                    Toast({
                        message: "当前没有评论信息",
                        position: "bottom",
                        duration: 2000
                    })
                }
            })
        },
        getmore(){ // 点击获取更多评论
            this.pageIndex++
            this.getCommentInfo()
        },
        commitComment(){  // 发表评论
            if(this.content != null && this.content != ""){
                this.$http.post('api/postcomment/' + this.id, {"content": this.content}).then(result => {
                    if(result.body.status === 0){
                        this.message.unshift({"user_name": "匿名用户",
                         "add_time": Date.now(), "content": this.content})
                         this.content = ""
                        console.log("提交评论成功！！")
                    }else{}
                })
            }else{
                Toast({
                    message: "评论不能为空！！",
                    position: "bottom",
                    duration: 2000
                })
            }
        }
    },
    props: ["id"]
}
</script>

<style lang="scss" scoped>
.comment-container{
    background-color: #fff;
    padding-top: 5px;
    overflow: hidden;
    .comment{
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        padding: 0 10px;
        .comment-avatar{
            flex-shrink: 0;
            margin-top: 10px;
        }
        textarea{
            height: 100px;
            margin: 0 10px;
            padding: 10px 5px;
            box-shadow: inset 0 2px 4px rgba(#bbb, 0.7);
        }
    }
    .sumbit{
        float: right;
        margin: 0 20px 5px 0;
        &::after{
            display: block;
            padding: 0;
        }
    }
    .cmt-list{
        clear: both;
        border-top: 1px solid rgba(#bbb, 0.7);
        .cmt-item{
            display: flex;
            justify-content: space-between;
            box-shadow: inset 0 -4px 6px rgba(#bbb, 0.7);
            padding: 5px 10px 10px 10px;
            .user-avatar{
                flex-shrink: 0;
                margin-top: 15px;
            }
            .user-info{
                flex-grow: 1;
                padding-left: 10px;
                .name{
                    margin-bottom: 1px;
                }
                .content{
                    padding: 4px 5px;
                    border: 1px solid #bfbfbf;
                    position: relative;
                    border-radius: 4px;
                    margin-right: 30px;
                    width: 75vw;
                    word-wrap: break-word;
                    &::before, &::after{
                        position: absolute;
                        left: -20px;
                        top: 3px;
                        display: inline-block;
                        content: "";
                        border-style: solid;
                        border-width: 5px 10px;
                    }
                    &::before{
                        border-color: transparent #bfbfbf transparent transparent;
                        left: -20px;
                    }
                    &::after{
                        border-color: transparent white transparent transparent;
                        left: -18px;
                    }
                }
            }
        }
        .load{
            margin-top: 10px;
        }
    }
}
</style>